<template>
	<view class="container">
		<loadingCat v-if="!readyed"></loadingCat>
		<u-navbar v-if="readyed" :is-back="false" :title="title" :background="background" title-color="#ffffff"></u-navbar>
		<view class="main" v-if="readyed" >
			<dog v-show="current === 0"></dog>
			<cat v-show="current === 1"></cat>
			<petFood v-show="current === 2"></petFood>
			<handmade v-show="current === 3"></handmade>
			<center v-show="current === 4"></center>
		</view>
		<u-tabbar 
		v-if="readyed" 
		v-model="current" 
		:list="tabBarList" 
		active-color="#3399CC" 
		inactive-color="#333333" 
		@change="changeTab" 
		height="128"
		icon-size="60"></u-tabbar>
	</view>
</template>

<script>
	import dog from "@v/home/tabBar/dog/dog";
	import cat from "@v/home/tabBar/cat/cat";
	import petFood from "@v/home/tabBar/petFood/petFood";
	import handmade from "@v/home/tabBar/handmade/handmade";
	import center from "@v/home/tabBar/center/center";
	import loadingCat from "@c/loading_cat";
	export default {
		components: {
			dog,
			cat,
			petFood,
			handmade,
			center,
			loadingCat
		},
		data() {
			return {
				title: '傻狗',
				current: 0,
				readyed:false,
				background: {
					backgroundColor: '#6DABDE',
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				tabBarList: [{
						iconPath: "/static/images/dog.png",
						selectedIconPath: "/static/images/dog.png",
						text: '傻狗',
						count: 2,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "/static/images/cat.png",
						selectedIconPath: "/static/images/cat.png",
						text: '懒猫',
						customIcon: false,
					},
					{
						iconPath: "/static/images/petFood.png",
						selectedIconPath: "/static/images/petFood.png",
						text: '宠物粮',
						customIcon: false,
					},
					{
						iconPath: "/static/images/handmade.png",
						selectedIconPath: "/static/images/handmade.png",
						text: '手工制品',
						count: 23,
						isDot: false,
						customIcon: false,
					},
					{
						iconPath: "/static/images/center.png",
						selectedIconPath: "/static/images/center.png",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					}
				]
			}
		},
		created() {
			setTimeout(()=>{
				this.readyed = true;
			},1500)
		},
		methods: {
			changeTab(index) {
				console.log(index)
				this.current = index;
				this.title = this.tabBarList[index].text;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.main {
		width: 100%;
		padding: 0 30rpx;
	}

	@font-face {
		font-family: "zkklt";
		// src: url('https://ystx.xn--4gqr6isbv1bn21d.com/uploads/zkklt.ttf');
		src: url('https://sungd.github.io/Pacifico.ttf');
	}

	.test {
		font-family: 'zkklt';
		font-size: 60rpx;
	}
</style>
